<template>
  <div class="creative-center-container no-background-container">
    <vab-query-form class="page-header">
      <vab-query-form-top-panel :span="18">
        <el-form inline label-width="100px" :model="queryForm" @submit.prevent>
          <el-form-item label="企业名称">
            <el-input v-model.trim="queryForm.company_name" clearable placeholder="请输入企业名称"/>
          </el-form-item>

          <el-form-item>
            <el-button :icon="Search" type="primary" @click="search">查询</el-button>
          </el-form-item>
        </el-form>
      </vab-query-form-top-panel>

      <vab-query-form-right-panel :span="6" v-if="detailForm.status==1">
        <el-button @click="handleLogDetail()">日志详情</el-button>
        <el-button @click="handleConfigDetail()">配置详情</el-button>
      </vab-query-form-right-panel>
    </vab-query-form>

    <el-row :gutter="20">
      <el-col :lg="17" :md="12" :sm="24" :xl="17" :xs="24">
        <vab-card style="">
          <template #header>
            报告正文
          </template>
          <el-scrollbar style="height:62vh;overflow-y: scroll">
            <div v-html="detailForm.content.LLM_result_core_business.replace(/\n/g, '<br/>')">
            </div>
          </el-scrollbar>
        </vab-card>
      </el-col>
      <el-col :lg="7" :md="12" :sm="24" :xl="7" :xs="24">
        <vab-card style="height:35vh">
          <template #header>
            产品/服务词
          </template>
          <el-scrollbar style="height: 180px;overflow-y: scroll"
                        v-html="detailForm.content.LLM_result_product.replace(/\n/g, '<br/><br/>')">
          </el-scrollbar>
        </vab-card>
        <vab-card style="height: 35vh">
          <template #header>
            行业词
          </template>
          <el-scrollbar style="height: 180px;overflow-y: scroll"
                        v-html="detailForm.content.LLM_result_category.replace(/\n/g, '<br/><br/>')">

          </el-scrollbar>
        </vab-card>
      </el-col>
    </el-row>
  </div>
</template>

<script lang="ts" setup>
import {ArrowRight, CaretBottom, CaretTop} from '@element-plus/icons-vue'
import {random} from 'lodash-es'
import landscape from '/@/assets/common_images/landscape.jpg'
import {getDetail, getLastHistoryDetail, addSearch} from '/@/api/company'

defineOptions({
  name: 'companySearch',
})

const detailForm = reactive<any>({
  uid: '',
  company_name: '',
  content: {
    LLM_result_product: '',
    LLM_result_category: '',
    LLM_result_core_business: ''
  },
  create_time_name: '',
})

const searchId = ref('')
const searchName = ref('')
let timer; // 用于存储定时器的变量

const route: any = useRoute()
const router = useRouter()
const queryForm = reactive({
  company_name: '',
})
const search = () => {

  if (!queryForm.company_name) {
    ElMessage.error('请输入企业名称')
    return
  }
  addSearch(queryForm).then(res => {
    const id = res.data
    detailForm.content.LLM_result_core_business = '任务进行中...'
    detailForm.content.LLM_result_category = ''
    detailForm.content.LLM_result_product = ''
    searchName.value = queryForm.company_name
    queryForm.company_name = ''
    timer = setInterval(() => {
      getDetails(id);
    }, 10000); // 10000毫秒等于10秒
    ElMessage.success('操作成功,请等待。预计3-5分钟内完成')
  })
}

const getDetails = async (id) => {
  try {
    const {data} = await getDetail({id: id});
    if (data && data.content) { // 检查data.content是否有内容
      // 如果有内容，清除定时器
      clearInterval(timer);
      // $baseNotify(searchName.value + "查询成功", '提示', 'success', 'bottom-right')

      // 使用Object.assign来合并对象
      Object.assign(detailForm, data);
    }
  } catch (error) {
    // 处理错误情况，例如打印错误信息
    console.error('获取详情失败:', error);
  }
};

onMounted(() => {
  getLastHistory();
});
const getLastHistory = () => {
  getLastHistoryDetail({}).then(res => {
    const {data} = res
    if (data.status==1) {
      Object.assign(detailForm, data);
    }else{
      detailForm.content.LLM_result_core_business = '任务进行中...'
      detailForm.content.LLM_result_category = ''
      detailForm.content.LLM_result_product = ''
      timer = setInterval(() => {
        getDetails(data.id);
      }, 10000); // 10000毫秒等于10秒
    }
  })
}

const handleLogDetail = () => {
  const id = detailForm.id
  router.push({
    path: '/historySearch/LogDetail',
    query: {
      id: id,
    },
  })

}
const handleConfigDetail = () => {
  const id = detailForm.id
  router.push({
    path: '/companyConfig/companyConfigDetail',
    query: {
      id: id,
    },
  })

}
</script>

<style lang="scss" scoped>
.creative-center-container {
  .item-content-wrap {
    display: flex;
    align-items: center;
    justify-items: center;

    :deep() {
      .el-image {
        width: 80px;
        margin-right: 15px;
        border-radius: var(--el-border-radius-base);
      }
    }
  }

  .el-statistic {
    --el-statistic-content-font-size: 28px;
  }

  .statistic-card {
    height: 100%;
    padding: var(--el-padding);
    background-color: var(--el-bg-color-overlay);
    border-radius: 4px;

    :deep() {
      .el-statistic__head {
        margin-bottom: var(--el-margin);

        [class*='ri'] {
          margin-top: -1.5px;
          margin-right: 3px;
        }

        .ri-user-heart-line {
          color: var(--el-color-danger);
        }

        .ri-contacts-book-2-line {
          color: var(--el-color-primary);
        }

        .ri-money-cny-circle-line {
          color: var(--el-color-warning);
        }
      }

      .el-statistic__head,
      .el-statistic__content {
        display: flex;
        flex-wrap: wrap;
        align-items: center;
        justify-content: center;
      }
    }

    .statistic-footer {
      display: flex;
      flex-wrap: wrap;
      align-items: center;
      justify-content: center;
      margin-top: var(--el-margin);
      font-size: var(--el-font-size-small);
      color: var(--el-text-color-regular);

      .footer-item {
        display: flex;
        align-items: center;
        justify-content: center;

        span:last-child {
          display: inline-flex;
          align-items: center;
          margin-left: 4px;
        }
      }

      .green {
        color: var(--el-color-success);
      }

      .red {
        color: var(--el-color-error);
      }
    }
  }

  .vab-card {
    ul {
      padding: 0;
      margin: 0;
      line-height: 30px;
      list-style: none;

      span {
        color: var(--el-color-grey);
      }
    }

    :deep() {
      .el-card__header {
        .more {
          position: absolute;
          right: var(--el-margin);
          cursor: pointer;
        }
      }
    }
  }

  :deep() {
    .el-carousel {
      margin-bottom: 20px;
      border-radius: var(--el-border-radius-base);

      &__item {
        .el-image {
          width: 100%;
          object-fit: fill;
        }
      }
    }
  }
}
</style>
